<!--
 * @Author: your name
 * @Date: 2021-09-26 15:10:03
 * @LastEditTime: 2021-10-03 16:57:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdatavue\src\views\others\test.vue
-->
<template>
    <div class="froms">
        <div v-if="!infos" class="dragdis"></div>
        <div class="froms_cell">
            <Input
                v-model:value="text"
                placeholder="请输入名称"
                @input="handleTextinput"
            ></Input>
        </div>
        <div class="froms_cell">
            <Divider>
                <p class="cellheader">字体样式</p>
            </Divider>

            <div class="stylegrid">
                <Tooltip title="加粗" placement="top">
                    <div
                        :class="['toolbarBox', weight == 'bold' ? 'active' : '']"
                        @click="handleClick('weight')"
                    >
                        <svg-icon icon-class="text_weight" size="1.3"></svg-icon>
                    </div>
                </Tooltip>
                <Tooltip title="斜体" placement="top">
                    <div
                        :class="['toolbarBox', styles == 'italic' ? 'active' : '']"
                        @click="handleClick('style')"
                    >
                        <svg-icon icon-class="text_xieti" size="1.3"></svg-icon>
                    </div>
                </Tooltip>
                <Tooltip title="下划线" placement="top">
                    <div
                        :class="['toolbarBox', undlines == 'underline' ? 'active' : '']"
                        @click="handleClick('undline')"
                    >
                        <svg-icon icon-class="text_line" size="1.3"></svg-icon>
                    </div>
                </Tooltip>
                <Tooltip title="颜色更换" placement="bottom">
                    <div class="toolbarBox" @click="handleColorClick">
                        <input
                            ref="colors"
                            v-model="colorsValue"
                            class="colors"
                            type="color"
                            @input="onChangeBgColor"
                            @change="onChangeBgColor"
                        />
                        <svg-icon
                            icon-class="text_color"
                            size="1.3"
                            :color="colorsValue"
                        ></svg-icon>
                    </div>
                </Tooltip>
            </div>
        </div>

        <!-- 禁用状态 当用户未选中时为禁用状态 -->
        <div class="froms_cell">
            <Divider>
                <p class="cellheader">字体大小</p>
            </Divider>
            <div class="stylesilder">
                <Slider
                    v-model:value="size"
                    :default-value="size"
                    :marks="marks"
                    @change="handleDisabledChange"
                ></Slider>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, unref, onMounted } from 'vue'
import { Button, Input, Tooltip, Slider,Divider } from 'ant-design-vue'

export default defineComponent({
    name: 'Editbar',
    components: {
        Button,
        Tooltip,
        Input,
        Slider,
        Divider
    },
    props: {
        getDateinfo: Object,
    },
    emits: {
        handleClick: null,
        handleColor: null,
        handleSize: null,
        changeText: null,
    },
    setup(props, { emit }) {
        let infos = ref()
        infos.value = null
        // 颜色
        const colorsValue = ref()
        const text = ref()
        const size = ref()
        size.value = 0
        const weight = ref()
        const styles = ref()
        const undlines = ref()
        const colors = ref<HTMLInputElement | null>(null)
        let marks = {
            0: '0px',
            100: '50px',
        }
        let objs = ref()
        objs.value = {
            text: {
                text: '',
                fontSize: 0,
                fill: '',
            },
            label: {
                fontWeight: '100',
                fontStyle: 'normal',
                textDecoration: 'normal',
                fill: '#666',
                fontSize: 0,
            },
        }
        // 监听节点切换
        watch(
            () => unref(props.getDateinfo),
            () => {
                infos.value = unref(props.getDateinfo)
                if (infos.value) {
                    initDatas(infos.value)
                } else {
                    initDatas(objs.value)
                }
            },
        )
        // 初始化
        onMounted(() => {
            initDatas(objs.value)
        })
        const initDatas = (infos) => {
            text.value = infos.text.text ? infos.text.text : ''
            size.value = Number(infos.label.fontSize)
            colorsValue.value = infos.label.fill
            weight.value = infos.label.fontWeight
            styles.value = infos.label.fontStyle
            undlines.value = infos.label.textDecoration
        }
        //  使用事件委托
        let fontstyles = [
            {
                tip: '字体加粗',
                name: '字体加粗',
                icon: 'language',
                id: 'weight',
            },
            {
                tip: '字体斜体',
                name: '字体加粗',
                icon: 'language',
                id: 'style',
            },
            {
                tip: '字体下划线',
                name: '字体加粗',
                icon: 'language',
                id: 'undline',
            },
        ]
        //   设置文字大小
        const handleDisabledChange = (e) => {
            emit('handleSize', e)
        }
        //   字体颜色
        const onChangeBgColor = (e) => {
            emit('handleColor', e.target.value)
        }
        const handleColorClick = () => {
            colors.value?.click()
        }
        //  侧边栏点击事件委托
        const handleClick = (e) => {
            let type = 'weight'
            let style = 'normal'
            if (e == 'weight') {
                type = 'weight'
                weight.value = weight.value == '100' ? 'bold' : '100'
                style = weight.value
            } else if (e == 'style') {
                type = 'style'
                styles.value = styles.value == 'normal' ? 'italic' : 'normal'
                style = styles.value
            } else if (e == 'undline') {
                type = 'undline'
                undlines.value = undlines.value == 'normal' ? 'underline' : 'normal'
                style = undlines.value
            }

            emit('handleClick', { type, style })
        }
        //   更改文字
        const handleTextinput = (e) => {
            emit('changeText', text.value)
        }
        return {
            colors,
            size,
            marks,
            text,
            infos,
            styles,
            weight,
            undlines,
            fontstyles,
            colorsValue,
            handleClick,
            handleTextinput,
            onChangeBgColor,
            handleDisabledChange,
            handleColorClick,
        }
    },
})
</script>

<style lang="less" scoped>
.froms {
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  height: calc(85vh);
  position: relative;
  .dragdis {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(241, 239, 239, 0.112);
    z-index: 999;
    cursor: not-allowed;
  }

  &_cell {
    .cellheader {
      font-size: 8px;
      color: #666;
    }
    .colors {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }
    .stylesilder {
      width: 98%;
      margin: 0 auto;
    }

    .stylegrid {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      .toolbarBox {
        background: #fff;
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px;

        border-radius: 3px;
        position: relative;
        color: #666;
        cursor: pointer;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        &.active {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
          color: aquamarine;
        }
      }
    }
  }
}
</style>
